<template>
	<div class="form-group clearfix" :class="{'primary': primary }">	  
		<label :for="id" class="col-sm-{{left}} control-label"><span class="required" v-if="required">*</span>{{title}}：</label>
		<div class="col-sm-{{right}}">
			<input :type="type" :name="name" class="form-control" :id="id" :placeholder="placeholder" :readonly="readOnly" :class="{'select-read-only': readOnly}" v-model="value" :maxlength="_maxlength">
		</div>
	</div>
</template>

<script>

	import { randomId } from "./general";
	import 'assets/script/bootstrap-maxlength.js'
	
	export default {
		data: () => ({
			id: randomId()
		}),
		computed: {
			right: function () {
				return 12 - this.left
			},
			_maxlength: function () {
				if(this.maxlength==524288) {
					return false;
				} else {
					return this.maxlength
				}
			}
		},
		props: {
			title: {
				type: String
			},
			left: {
				type: String,
				default: 2
			},

			type: {
				type: String,
				default: "text"
			},
			name: String,
			value: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: ""
			},
			primary: {
				type: Boolean,
				default: true
			},
			readOnly: {
				type: Boolean,
				default: false
			},				
			maxlength: {
				default: 524288
			},
			required:{
				type: Boolean, 
			  default: false
			}				
		},
		methods: {
			reset() {
				this.value = "";
			},
			get() {
				return this.value;
			}
		},
		ready() {
			//ie9
			$('input[maxlength]').maxlength();
		}

	}
</script>